<template>
  <div>
    <a-drawer
      v-model:open="modalOpen"
      :title="title"
      width="50%"
      :footer="null"
    >
      <a-space direction="vertical" style="width: 100%" :size="16">
        <a-form
          :model="formData"
          ref="formRef"
          labelAlign="left"
          :label-col="{ span: 3 }"
          :wrapper-col="{ span: 21 }"
        >
          <a-form-item
            label="卡券名称"
            name="name"
            :rules="[{ required: true, message: '输入卡券名称' }]"
          >
            <a-input v-model:value="formData.name" placeholder="输入卡券名称" />
          </a-form-item>
          <a-form-item
            label="卡券类别"
            name="couponCategory"
            :rules="[{ required: true, message: '请选择卡券类别' }]"
          >
            <a-select
              ref="select"
              v-model:value="formData.couponCategory"
              style="width: 100%"
              placeholder="卡券类别"
            >
              <a-select-option :value="1">购物券</a-select-option>
              <a-select-option :value="2">鉴定券</a-select-option>
              <a-select-option :value="3">养护券</a-select-option>
              <a-select-option :value="4">找货券</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="使用类目"
            name="typeId"
            :rules="[{ required: true, message: '请选择使用类目' }]"
          >
            <a-select
              ref="select"
              mode="multiple"
              v-model:value="formData.typeId"
              style="width: 100%"
              placeholder="使用类目"
            >
              <a-select-option :value="0">全部</a-select-option>
              <a-select-option
                v-for="item in goodsTypeList"
                :key="item.id"
                :value="item.id"
                >{{ item.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item
            label="发放群体"
            name="groupType"
            :rules="[{ required: true, message: '请选择发放群体' }]"
          >
            <a-select
              ref="select"
              mode="multiple"
              v-model:value="formData.groupType"
              style="width: 100%"
              placeholder="发放群体"
            >
              <a-select-option :value="0">全部</a-select-option>
              <a-select-option :value="1">新用户</a-select-option>
              <a-select-option :value="2">老用户</a-select-option>
              <a-select-option :value="3">会员用户</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="抵扣方式"
            name="type"
            :rules="[{ required: true, message: '请选择抵扣方式' }]"
          >
            <a-radio-group
              v-model:value="formData.type"
              @change="handleChangeType"
            >
              <a-radio :style="radioStyle" :value="1"
                >满减
                <a-input
                  v-model:value="formData.minAmount"
                  placeholder="输入金额"
                  type="number"
                  style="width: 150px; margin-left: 10px; margin-right: 10px"
                  addon-before="满"
                />
                减
                <a-input
                  v-model:value="formData.amount"
                  placeholder="输入金额"
                  type="number"
                  style="width: 150px; margin-left: 10px"
                  addon-after="元"
                />
              </a-radio>
              <a-radio :style="radioStyle" :value="2"
                >折扣
                <a-input-number
                  v-model:value="rebates"
                  placeholder="输入折扣比例"
                  max="10"
                  min="0.1"
                  addon-after="折"
                  style="width: 150px; margin-left: 10px"
                />
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            label="叠加使用"
            name="overlayUse"
            :rules="[{ required: true, message: '请选择是否叠加使用' }]"
          >
            <a-radio-group v-model:value="formData.overlayUse">
              <a-radio :value="1">叠加使用 </a-radio>
              <a-radio :value="0">不可叠加 </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            label="总发数量"
            name="maxNum"
            :rules="[{ required: true, message: '请选择是否叠加使用' }]"
          >
            <a-radio-group v-model:value="formData.maxNum">
              <a-input-number
                min="1"
                v-model:value="formData.maxNum"
                placeholder="请输入卡券总发行数量"
                style="width: 200px"
                type="number"
                addon-after="张"
              />
              <a-radio
                style="margin-left: 10px; height: 30px; line-height: 30px"
                :value="0"
              >
                无限制
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            label="有效方式"
            name="validType"
            :rules="[{ required: true, message: '请选择是否叠加使用' }]"
          >
            <a-radio-group
              v-model:value="formData.validType"
              @change="handleChangeValidType"
            >
              <a-radio :style="radioStyle" :value="1"
                >顺时使用
                <a-input
                  v-model:value="formData.validDay"
                  placeholder="请输入卡券有限期时长天数"
                  type="number"
                  min="1"
                  style="width: 300px; margin-left: 10px"
                  addon-after="天"
                />
              </a-radio>
              <a-radio :style="radioStyle" :value="2"
                >限时使用
                <a-range-picker
                  v-model:value="datePicker"
                  @change="handleChangeDate"
                  placeholder="请选择可使用时间区间"
                  style="width: 300px; margin-left: 10px"
                />
              </a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item
            label="使用规则"
            name="introduce"
            :rules="[{ required: true, message: '输入使用规则' }]"
          >
            <a-textarea
              v-model:value="formData.introduce"
              placeholder="输入使用规则"
              :rows="4"
            />
          </a-form-item>
          <a-form-item
            label="状态"
            name="state"
            :rules="[{ required: true, message: '请选择状态' }]"
          >
            <a-select
              ref="select"
              v-model:value="formData.state"
              placeholder="请选择卡券状态"
            >
              <a-select-option :value="1">启用</a-select-option>
              <a-select-option :value="2">禁用</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 9, span: 4 }">
            <div class="btns center">
              <a-space>
                <a-button @click="handleCloseDialog">取消</a-button>
                <a-button type="primary" @click="handleSubmit">确定</a-button>
              </a-space>
            </div>
          </a-form-item>
        </a-form>
      </a-space>
    </a-drawer>
  </div>
</template>
<script setup>
import { ref, reactive, nextTick } from "vue";
import { saveCouponConfig } from "@/api/market";
import { goodsType } from "@/api/order";
import dayjs from "dayjs";
const modalOpen = ref(false);
const formData = ref({
  name: undefined,
  couponCategory: undefined,
  typeId: undefined,
  groupType: undefined,
  type: undefined,
  overlayUse: undefined,
  maxNum: undefined,
  validType: undefined,
  validDay: undefined,
  introduce: undefined,
  state: undefined,
  startTime: undefined,
  endTime: undefined,
  minAmount: undefined,
  amount: undefined,
  goodsType: undefined,
  source: 1,
  repeatState: 0,
  applicable: "ces",
});
// 折扣
const rebates = ref(undefined);
const formRef = ref(null);
const title = ref("");
const datePicker = ref([null, null]);
const open = (titles, record) => {
  title.value = titles;
  getGoodsType();
  modalOpen.value = true;
  nextTick(() => {
    formData.value = Object.assign({}, record);
    if (formData.value.validType == 2) {
      datePicker.value = [
        dayjs(formData.value.startTime),
        dayjs(formData.value.endTime),
      ];
    } else {
      datePicker.value = [null, null];
    }
    if (formData.value.type == 2) {
      rebates.value = formData.value.amount;
      formData.value.amount = undefined;
      formData.value.minAmount = undefined;
    } else {
      rebates.value = undefined;
    }
    if (formData.value.validType == 1) {
      formData.value.validType = 1;
    } else {
      formData.value.validDay = undefined;
      formData.value.validType = 2;
    }
    formRef.value.resetFields();
  });
};

function handleChangeDate(date, dateString) {
  datePicker.value = date;
  formData.value.startTime = dateString[0] + " 00:00:00";
  formData.value.endTime = dateString[1] + " 23:59:59";
}
// 抵扣方式
function handleChangeType(val) {
  formData.value.amount = undefined;
  formData.value.minAmount = undefined;
  rebates.value = undefined;
}
function handleChangeValidType() {
  formData.value.startTime = undefined;
  formData.value.endTime = undefined;
  formData.value.validDay = undefined;
}
const radioStyle = reactive({
  display: "flex",
  height: "30px",
  lineHeight: "30px",
  marginBottom: "10px",
});
// 获取类目
const goodsTypeList = ref([]);
const getGoodsType = async () => {
  const result = await goodsType();
  if (result.code == 200) {
    goodsTypeList.value = result.data;
  }
};

function handleCloseDialog() {
  modalOpen.value = false;
  formData.value = {};
  formRef.value.resetFields();
}

const emits = defineEmits(["refreshList"]);
function handleSubmit() {
  if (formData.value.type == 2) {
    formData.value.amount = rebates;
  }
  formData.value.source = 1;
  formData.value.repeatState = 0;
  formData.value.applicable = formData.value.introduce;
  formRef.value.validate().then(() => {
    saveCouponConfig(formData.value).then((res) => {
      if (res.code === 200) {
        handleCloseDialog();
        emits("refreshList");
      }
    });
  });
}
defineExpose({ modalOpen, open });
</script>
